<!--
  @Description:登录
  @author Wangshu
  @date 2019/8/17
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="__PUBLIC__/css/signIn.css">
    <link rel="stylesheet" href="__PUBLIC__/css/common/common.css">
    <link rel="stylesheet" href="__PUBLIC__/css/common/swiper.min.css">
    <title>山东科技大学技术转移公共服务平台-注册</title>
</head>
<body>
<div class="header flex a-center">
    <img src="__PUBLIC__/asset/fodder/logo.png" alt="">
    <div class="line"></div>
    <div>注册</div>
</div>
<div class="content">
    <div class="window hp100 flex rcb">
        <div class="slogan"><img src="__PUBLIC__/asset/fodder/slogan.png" alt=""></div>
        <div class="s-window right">
            <div class="title">
                <p>注册</p>
                <p></p>
            </div>
            <div class="search">
                <div class="search-block">
                    <input type="text" placeholder="请输入手机号" name="phone" id="phone">
                </div>
            </div>

            <div class="flex a-center">
                <div class="search auth">
                    <div class="search-block">
                        <input type="text" placeholder="验证码" name="code" id="code">
                    </div>
                </div>
                <input class="search code get-code" id="getCode" type="button" value="获取验证码">
            </div>
            <div class="search">
                <div class="search-block">
                    <input type="password" placeholder="新密码" name="password" id="password">
                </div>
            </div>
            <div class="search">
                <div class="search-block">
                    <input type="password" placeholder="确认新密码" name="password_confirm" id="password_confirm">
                </div>
            </div>

            <div class="button">
                立即登录
            </div>
        </div>
    </div>
</div>
<div class="footer flex a-center ">
    <div>Copyright©2019 　山东科技大学</div>
    <div style="color:#bebebe; margin-left: 20px;">鲁ICP备09091012号</div>
    <span style="line-height: 26px ; margin-left: 20px;"><img
            style="width: 44px;height: 17px; margin-right: 10px;vertical-align: middle"
            src="__PUBLIC__/asset/fodder/todo_black.png" alt=""><span
            style="vertical-align: middle">投道科技提供技术支持</span></span>
</div>
<script src="__PUBLIC__/js/public/jquery-1.11.3.min.js"></script>
<script src="__PUBLIC__/js/public/swiper.min.js"></script>
<script src="__PUBLIC__/js/public/bootstrap.min.js"></script>
<script src="__PUBLIC__/js/layer/layer/layer.js"></script>
<script>
    //倒计时
    var InterValObj; //timer变量，控制时间
    var count = 60; //间隔函数，1秒执行
    var curCount; //当前剩余秒数
    var code = ""; //验证码
    function SetRemainTime() {
        if (curCount == 0) {
            window.clearInterval(InterValObj); //停止计时器
            $(".get-code").removeAttr("disabled"); //启用按钮
            $(".get-code").val("重新发送");
            $(".get-code").css('color', '#333');
            $(".get-code").css('background', '#fff');
            code = ""; //清除验证码。如果不清除，过时间后，输入收到的验证码依然有效
            console.log('1')
        } else {
            console.log(curCount, '当前剩余秒数')

            curCount--;
            $(".get-code").val(+curCount + "S");
        }
    }

    $(".button").click(function () {
        const phone = $("#phone").val();
        const code = $("#code").val();
        const password = $("#password").val();
        const password_confirm = $("#password_confirm").val();
        $.post("{:url('doSignUp')}", {phone, code, password, password_confirm}, function (res) {
            console.log(res)
            if (res.code === 0) {
                return layer.msg(res.msg);
            } else {
                layer.msg(res.msg);
                window.location.href = "{:url('login')}"
            }
        })
    })


    $("#getCode").click(function () {
        const phone = $("#phone").val();
        const code = $("#captcha_input").val();
        if (!phone) {
            return
        }
        $.post("{:url('getCode')}", {phone, code}, function (res) {
            console.log(res)
            if (res.code === 0) {
                return layer.msg(res.msg);
            } else {
                curCount = count;
                $(".get-code").css('color', '#999');
                $(".get-code").css('background', '#eee');
                $(".get-code").css('border', '0.02rem solid #eee');
                $(".get-code").attr("disabled", "true");
                $(".get-code").val(+curCount + "S");
                InterValObj = window.setInterval(SetRemainTime, 1000);
                layer.msg(res.msg);
            }
        })
    })
</script>
</body>
</html>
